<template>
    <div class="login-container">
        <el-card class="login-card">
            <div class="login-header">
                <h2>人力资源系统登录</h2>
                <el-icon class="login-icon">
                    <UserFilled />
                </el-icon>
            </div>

            <el-form :model="loginForm">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="User" />
                </el-form-item>

                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" prefix-icon="Lock"
                        show-password />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="login-btn" @click="handleLogin">
                        登 录
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>
<script setup>
import { ref } from 'vue'
import { UserFilled, Lock, User, Key } from '@element-plus/icons-vue'
import {login} from '@/api/login'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/UserStore.js'

const store = useUserStore();



const router = useRouter()

// 表单数据
const loginForm = ref({
    username: '',
    password: ''
})

const handleLogin = async()=>{
   
    const rows = await login(loginForm.value);
    
    if(rows.code == 200){
        sessionStorage.setItem('author_token',rows.data.token);
        store.setUserInfo(rows.data.id);
        router.push('/');
    }else{
        ElMessage({  
            type: 'error',
            message: rows.msg
        })
    }
}


</script>
<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    background-image: url('@/assets/images/login-bg.jpg');
    background-size: cover;
    background-position: center;
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
}

.login-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.login-header {
    text-align: center;
    padding: 24px 0;
    background: linear-gradient(to right, #409eff, #337ecc);
    color: white;
    margin-bottom: 24px;
}

.login-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
}

.login-form {
    padding: 0 30px 20px;
}

:deep(.el-form-item__label) {
    font-weight: 500;
    color: #606266;
}

:deep(.el-input__wrapper) {
    border-radius: 8px;
    padding: 2px 15px;
}

:deep(.el-input__prefix) {
    display: flex;
    align-items: center;
}

.login-btn {
    width: 100%;
    height: 44px;
    font-size: 16px;
    letter-spacing: 2px;
    border-radius: 8px;
    background: linear-gradient(to right, #409eff, #337ecc);
    border: none;
    transition: all 0.3s;
}

.login-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.forgot-password {
    float: right;
    font-size: 14px;
}

.el-checkbox {
    margin-right: 0;
}

/* 响应式调整 */
@media (max-width: 480px) {
    .login-card {
        width: 90%;
        margin: 0 auto;
    }

    .login-form {
        padding: 0 20px 15px;
    }

    .login-header h2 {
        font-size: 20px;
    }

    .login-btn {
        height: 40px;
        font-size: 14px;
    }
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-card {
    animation: fadeIn 0.6s ease-out;
}

/* 记住我样式 */
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #409eff;
    border-color: #409eff;
}

:deep(.el-checkbox__label) {
    color: #606266;
    font-size: 14px;
}

/* 输入框聚焦效果 */
:deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #409eff inset;
}
</style>